﻿@page "/gantt-chart/zooming"

@using Syncfusion.Blazor.Gantt
@using ej2_blazor_zoomingdata

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the various phases involved in the manufacturing process of a product, which transforms from a conceptual model to a sellable product. </p>
</SampleDescription>
<ActionDescription>
    <p>
        The sample demonstrates the zooming support in Gantt Chart.You can zoom in or zoom out the project timeline dynamically with following toolbar buttons.
        <li><code>ZoomIn</code> - To perform zoom in action on Gantt timeline.</li>
        <li><code>ZoomOut </code> - To perform zoom out action on Gantt timeline.</li>
        <li><code>ZoomToFit </code> - To show all tasks with timeline fit into available Chart width.</li>
        <br>The zooming feature enables you to view the tasks in the project clearly from minute to year timespan. You need to include <code>ZoomIn</code>, <code>ZoomOut </code> and <code>ZoomToFit </code> buttons in the toolbar for performing zooming actions in Gantt Chart.
        <li><code>ZoomIn</code> - If the user clicks on the <code>ZoomIn</code> icon we have increased the timeline cell width, when the cell size exceeds the specified range then we have changed the timeline view mode.</li>
        <li><code>ZoomOut </code> - If the user clicks on the <code>ZoomOut</code> icon we have decrease the timeline cell width, when the cell size falls behind the specified range then we have changed the timeline view mode based on the zooming levels.</li>
        <li><code>ZoomToFit </code> - In project, if the tasks are rendered in different time ranges, when the user clicks on the <code>ZoomToFit</code> icon, then all the tasks are rendered within the current viewable Chart container width.</li>
    </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%"
                     Toolbar="@(new List<string>{ "ZoomIn","ZoomOut","ZoomToFit"})" TreeColumnIndex="1"
                     ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"
                                 Dependency="Predecessor" ParentID="ParentId"></GanttTaskFields>
                <GanttLabelSettings LeftLabel="TaskName" TValue="ZoomingData.TaskData">
                </GanttLabelSettings>
                <GanttSplitterSettings Position="30%"></GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 4, 28);
    public List<ZoomingData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = ZoomingData.ZoomData();
    }
}